<template>
  <div class="home">
    <home-header
      :cityInfo="cityInfo"
      class="old-search"
      :class="{ hide: isHide }"
      ref="homeHeader"
    ></home-header>
    <!-- 占位 -->
    <home-header
      :cityInfo="cityInfo"
      class="search"
      :class="{ active: isActive }"
    ></home-header>
    <scroll
      sHeight="500"
      :listenScroll="true"
      :probeType="2"
      @scroll="changeScroll"
      ref="myscroll"
      :data="shopData"
      :pullup="true"
      @scrollToEnd="scrollE"
    >
      <home-cate class="cate"></home-cate>
      <home-content class="content" :shopData="shopData"></home-content>
    </scroll>
    <!-- 占位 -->
    <div style="width: 100%; height: 50px"></div>
    <bottom-bar ref="bottomBar" class="myBar"></bottom-bar>
  </div>
</template>

<script>
import homeHeader from "../components/home/homeHeader";
import homeCate from "../components/home/homeCate";
import homeContent from "../components/home/homeCotent";
import bottomBar from "../components/common/bottomBar";
import scroll from "../components/common/scroll";
import { getCityGeohash, getAllshop } from "../api/api";

export default {
  name: "Home",
  components: {
    homeHeader,
    homeCate,
    homeContent,
    bottomBar,
    scroll,
  },
  created() {
    let geohash =
      this.$route.query.geohash ||
      JSON.parse(localStorage.getItem("state")).geoHash;
    let hasharr = geohash.split(",");
    //请求当前详细的地址
    getCityGeohash(
      this.$route.query.geohash ||
        JSON.parse(localStorage.getItem("state")).geoHash
    ).then((res) => {
      this.cityInfo = res;
    });
    //请求所有店铺
    getAllshop({ latitude: hasharr[0], longitude: hasharr[1] }).then((res) => {
      this.shopData = res;
    });
    //如果有geohash存入vuex并且保存缓存
    if (geohash) {
      this.$store.commit("setGeohash", geohash);
      //并且保存缓存
      localStorage.setItem("state", JSON.stringify(this.$store.state));
    }
  },
  data() {
    return {
      isFixed: "",
      transY: 0,
      isShow: false,
      //滚动组件距离top高
      // fullTop: 0,
      //算比例
      // heightP: 0,
      isActive: false,
      isHide: false,
      homeList: [],
      cityInfo: {},
      //商铺列表
      shopData: [],
      //记录当前加载的数据页默认第一页
      offset: 0,
    };
  },
  methods: {
    changeScroll(pos) {
      if (-pos.y > 20) {
        this.isActive = true;
        this.isHide = true;
      }
      if (-pos.y < 20) {
        this.isActive = false;
        this.isHide = false;
      }
    },
    scrollE() {
      let geohash =
        this.$route.query.geohash ||
        JSON.parse(localStorage.getItem("state")).geoHash;
      let hasharr = geohash.split(",");
      this.offset = this.offset + 1;
      getAllshop({
        latitude: hasharr[0],
        longitude: hasharr[1],
        offset: this.offset,
      }).then((res) => {
        this.shopData = this.shopData.concat(res);
      });
      // const instance = this.$axios.create();
      // instance.interceptors.request.use(
      //   function (config) {
      //     // 在发送请求之前做些什么
      //     console.log(1);
      //     return config;
      //   },
      //   function (error) {
      //     // 对请求错误做些什么
      //     return Promise.reject(error);
      //   }
      // );
      // instance.get("v1/cities/1");
    },
  },
  mounted() {
    //页面滚动
    let full = this.$refs.myscroll._vnode.elm.offsetTop / 4;
    this.fullTop = full;
    //如果有缓存
    if (localStorage.getItem("state")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem("state"))
        )
      );
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  .old-search {
    transition: all 0.3s;
    opacity: 1;
    &.hide {
      opacity: 0;
    }
  }
  .search {
    width: 100%;
    height: 0;
    position: fixed;
    height: 1.44rem;
    top: 0;
    left: 0;
    z-index: 99;
    opacity: 0;
    transition: all 0.3s;
    &.active {
      opacity: 1;
      background-image: linear-gradient(180deg, #50b8fd, #50b8fd);
    }
  }
  .fixheader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 50px;
  }
  .cate {
    transform: translateY(-1.466667rem);
    margin-bottom: -1.466667rem;
  }
  .content {
    margin-top: 0.4rem;
  }
}
</style>
